<template>
  <el-header class="header">
    <div>
    </div>
    <router-link to="/" tag="p" class="header-link">进入网站首页 >></router-link>

  </el-header>
  <div class="login-container">
    <form class="login-form" @submit.prevent="submitLogin">
      <div class="form-item">
        <label for="phone">电话号码</label>
        <input id="phone" type="text" placeholder="请输入电话号码" v-model="loginData.phone">
      </div>
      <div class="form-item">
        <label for="password">密码</label>
        <input id="password" type="password" placeholder="请输入密码" v-model="loginData.password">
      </div>
      <button type="submit">登录</button>
      <hr>
      <div class="options-container">
        <p class="tip">忘记密码</p>
        <router-link to="/register" tag="p" class="tip">免费注册</router-link>
      </div>

    </form>
  </div>
</template>

<script>
import {ref} from 'vue';
import axios from "axios";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

export default {
  setup(){
    const loginData = ref({
      phone:'',
      password:'',
    });

    const router = useRouter();

    //处理登录请求
    const submitLogin = async ()=>{
      // 判空操作
      if (!loginData.value.phone) {
        ElMessage.error('电话号码不能为空');
        return;
      }
      if (!loginData.value.password) {
        ElMessage.error('密码不能为空');
        return;
      }
      try{
        //发生登录请求到后端
        const response = await axios.post('/api/user/login',null,{
          params:{
            phone:loginData.value.phone,
            password:loginData.value.password,
          },
        });

      //  检查后端响应结果
        if(response.data.code===200){
          ElMessage.success("登录成功");

          const user = response.data.data;

          //存储用户信息到sessionStorage(会话时清除）
          sessionStorage.setItem("CurUser",JSON.stringify(user));

          router.push('/'); //跳转到首页
        }else {
          ElMessage.error(response.data.message || '登录失败');
        }
      }catch (error){
        console.error('登录请求失败:', error);
        ElMessage.error('登录失败，请稍后再试');
      }
    };
    return{
      loginData,
      submitLogin,
    };
  },
};


</script>

<style scoped>
.header {
  display: flex;
  height: 53px;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
}
.header div{
  height: 80%;
  width: 10%;
  /*background-color: pink;*/
  vertical-align: center;
}
.header-link{
  margin: 0;
  cursor:pointer;
  color: white;
}
.header-link:hover{
  font-size: 16px;
  color: #ffd2d8;
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 53px);
  background-color: #f5f5f5;
  background-image: url("../../assets/images/bg.jpg");
  background-size: cover; /* 使背景图片完全覆盖容器 */
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

.login-form {
  width: 25%;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-form hr{
  margin: 10px auto;
  width: 80%;
  border: none;
  border-top: 1px solid #ddd;
}

.form-item {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #ff84b0;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #ffd2d8;
  color: black;
}

.options-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.tip {
  font-size: 13px; /* 设置提示文本的字体大小 */
  color: #666;
  cursor: pointer;
}

/* 响应式布局 */

/* 超小屏幕（手机，小于 768px） */
@media (max-width: 767px) {
  .login-form {
    width: 90%; /* 手机上让表单宽度占据屏幕的大部分 */
    padding: 10px; /* 减小内边距 */
  }

  .tip {
    font-size: 12px; /* 小屏幕下提示文本稍微小一点 */
  }

  button {
    padding: 8px; /* 按钮在小屏幕下稍微缩小 */
  }
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) and (max-width: 991px) {
  .login-form {
    width: 70%; /* 平板设备宽度为 750px */
  }
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) and (max-width: 1199px) {
  .login-form {
    width: 50%; /* 桌面屏幕宽度为 970px */
  }
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {
  .login-form {
    width: 30%; /* 大屏幕设备宽度为 1170px */
  }
}

</style>